<template>
	<view class="content">
		<!-- 头部背景图及导航栏 -->
		<view class="contetn-header">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<span>我的</span>
				</view>
			</view>
			<view class="page-header-backimg">
				<!-- 图片问题 -->
				<img :src="queryIconImage('indexsearch1')" alt="" style="width: 100%; height: 100%;">
			</view>
		</view>
		<!-- 中部内容 -->
		<view class="content-body">
			<!-- 内容第一部分 -->
			<view class="content-body-top">
				<view class="body-top-fiest">
					<!-- 用户图片及姓名部分 -->
					<view class="top-fiest-user" v-if="user.id">
						<img :src="user?.avatar?user?.avatar?.url :queryIconImage('modelone1')" alt=""
							style="width: 120rpx;height: 120rpx; border: 4rpx solid #fff;border-radius: 50%;margin-bottom: 10rpx;box-sizing: border-box;">
						<span>{{user?.nickname}}</span>
					</view>
					<!-- 未登录情况的头像 -->
					<view class="top-fiest-user" v-if="!user.id" @click="loginsubmit">
						<img :src="queryImageHeader('modelone1')" alt=""
							style="width: 80rpx;height: 80rpx;box-sizing: border-box;">
						<span style="padding-top: 10rpx;">未登录</span>
					</view>
					<!-- 操作按钮 -->
					<view class="top-fiest-link" style="text-align: right;" @click="gouseredit" v-if="user.id">
						<img :src="queryIconImage('link1')" alt="" style="width: 30rpx; height: 30rpx;">
					</view>
					<!-- 用户是否为答主 -->
					<view class="top-fiest-quest" :style="true?`background-image: url(${imgList[0]?.img?.url});`:''">
						<!-- 是答主的情况 -->
						<view class="fiest-quest-true" v-if="user.id && user.is_answer=='已通过'">
							<view class="quest-true-one">
								<img :src="queryIconImage('userlogo1')" alt="" style="width: 60rpx;height: 60rpx;">
								<span>回答</span>
								<span
									style="font-family: HarmonyOS Sans SC;font-size: 36rpx;font-weight: 500;line-height: 30rpx;">{{user?.article_comments?.length || 0}}</span>
							</view>
							<view class="quest-true-one">
								<img :src="queryIconImage('userlogo2')" alt="" style="width: 60rpx;height: 60rpx;">
								<span>余额</span>
								<span
									style="font-family: HarmonyOS Sans SC;font-size: 36rpx;font-weight: 500;line-height: 30rpx;">{{(user?.user_assets[0]?.balance)/100 || 0}}元</span>
							</view>
							<view class="quest-true-one">
								<img :src="queryIconImage('userlogo3')" alt="" style="width: 60rpx;height: 60rpx;">
								<span>答题收益</span>
								<span
									style="font-family: HarmonyOS Sans SC;font-size: 36rpx;font-weight: 500;line-height: 30rpx;">{{(income/100).toFixed(2) || 0}}元</span>
							</view>
						</view>
						<!-- 非答主情况 -->
						<view class="fiest-quest-false" v-if="user.id && user.is_answer=='未申请'">

							<span style="font-style: italic;">普通用户</span>

							<view class="quest-false-content-noAnswer" @click="goapply">
								<img :src="queryIconImage('userlogo4')" alt=""
									style="width: 40rpx;height: 40rpx;margin-right: 7rpx;">
								<text
									style="font-size: 28rpx; text-decoration: underline; font-family: Alibaba PuHuiTi 2.0; letter-spacing: 0px;">申请成为答主</text>
								<!-- 	<span
										style="display: inline-block; border-bottom: 4rpx solid #fff;padding-bottom: 10rpx;">申请成为答主</span> -->
							</view>


						</view>

						<!-- 非答主情况 -->
						<view class="fiest-quest-false" v-if="user.id && user.is_answer=='审核中'">
							<!-- 	<view class="quest-false-title">
								<span>审核中</span>
							</view>
							<view class="quest-false-content">
								<img :src="queryIconImage('userlogo4')" alt=""
									style="width: 40rpx;height: 40rpx;margin-right: 7rpx;">
								<span
									style="display: inline-block; border-bottom: 4rpx solid #fff;padding-bottom: 10rpx;">答主申请审核中</span>
							</view> -->
							<span style="font-style: italic;">普通用户</span>

							<view class="quest-false-content-noAnswer">
								<img :src="queryIconImage('userlogo4')" alt=""
									style="width: 40rpx;height: 40rpx;margin-right: 7rpx;">
								<text style="font-size: 28rpx; text-decoration: underline; font-family: Alibaba PuHuiTi 2.0; letter-spacing: 0px;
							">答主申请审核中</text>
								<!-- 	<span
																	style="display: inline-block; border-bottom: 4rpx solid #fff;padding-bottom: 10rpx;">申请成为答主</span> -->
							</view>
						</view>
						<!-- 未登录时状态 -->
						<view class="fiest-quest-login" v-if="!user.id" @click="loginsubmit">
							<span
								style="display: inline-block;padding-bottom: 5rpx;border-bottom: 4rpx solid #fff;">登录后查看</span>
						</view>

					</view>
					<!-- 答题收益明细 -->
					<view class="fiest-quest-money" v-if="user.id">
						<view class="quest-money-left">
							<span class="money-left-text" v-if="user.is_answer=='已通过'">今日回答提问 {{numbe}}</span>
							<span class="money-left-text" v-else>今日提问回答 {{numbe}}</span>
							<span style="line-height: 40rpx;">公开悬赏回答可获得收益分成</span>

						</view>
						<view class="quest-money-right" @click="gomyincome" v-if="user.id">
							<span>资金明细</span>
						</view>

					</view>
					<view class="second-quest-money" v-if="user.id && user.is_answer=='未申请'||user.is_answer=='审核中'">
						<view class="second-quest-money-info">
							<view class="second-quest-money-infoLeft">
								<span style="color: #408EFF; font-size:24rpx">余额:</span>
								<span
									style="color: #999999;font-size:24rpx">&emsp;{{(user?.user_assets[0]?.balance)/100 || 0}}元</span>
							</view>
							<view class="second-quest-money-infoRight">
								<span style="color: #408EFF;font-size:24rpx">提问收益:</span>
								<span style="color: #999999;font-size:24rpx">&emsp;{{questionIncom/100 || 0}}元</span>
							</view>
						</view>
					</view>
				</view>


				<!-- 回答等列表 -->
				<template v-for="(item,index) in isquest" :key="item.id">
					<view class="body-top-list" @click="govalue(item)" v-if="item.is_answer">

						<img :src="item.img" alt=""
							style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 40rpx;">
						<view class="top-list-title">
							<span class="list-title-text">{{item.name}}</span>
							<span>{{item.text}}</span>
						</view>
						<img :src="queryIconImage('userlogolist6')" alt="" style="width: 20rpx;height: 20rpx;">

					</view>
				</template>
			</view>
			<!-- 内容第二部分 设置/关于 -->
			<!-- 			<view class="content-body-bottom">
				<view class="body-bottom-list">
					<img :src="queryIconImage('userlogolist7')" alt=""
						style="width: 30rpx; height: 30rpx; margin-right: 53rpx;">
					<view class="bottom-list-title">
						<span>设置</span>
					</view>
					<img :src="queryIconImage('userlogolist6')" alt="" style="width: 20rpx;height: 20rpx;">
				</view>
				<view class="body-bottom-list">
					<img :src="queryIconImage('userlogolist8')" alt=""
						style="width: 30rpx; height: 30rpx; margin-right: 53rpx;">
					<view class="bottom-list-title">
						<span>关于</span>
					</view>
					<img :src="queryIconImage('userlogolist6')" alt="" style="width: 20rpx;height: 20rpx;">
				</view>
			</view> -->

			<!-- 内容第三部分 -->
			<view class="content-body-logo">
				<!-- 图片问题 -->
				<img :src="queryImage('homelogo13')" alt=""
					style="width: 119.57rpx;height: 61.89rpx;margin-bottom: 15rpx;">
				<img :src="queryIconImage('userlogolist9')" alt="" style="width: 220rpx;height: 12.63rpx;">
			</view>
		</view>

		<u-popup :safeAreaInsetBottom="false" mode="center" :round="20" :show="showLoginPopular" @close="close"
			@open="open">
			<view class="popularlogin">
				<img :src="queryIconImage('weixinlogo1')" alt="" style="width: 60rpx;height: 60rpx;">
				<p class="popularlogin-text">登录后查看</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" @click="loginsubmit">
						<span>授权登录</span>
					</view>
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancellationbtn">
						<span>取消</span>
					</view>
				</view>
			</view>
		</u-popup>

		<my-tabbar :selected="selected"></my-tabbar>
	</view>
</template>

<script>
	import methods from "@/pages/index/methods.js"
	import methodsJS from "@/pages/home/methods.js"
	import {
		mapState
	} from 'vuex'
	import MyTabbar from '@/components/my-tabbar/my-tabbar.vue'
	export default {
		components: {
			MyTabbar
		},
		data() {
			return {
				questionIncom: 0,
				numbe: 0,
				user: {},
				todayAnswerCount: 0,
				showLoginPopular: false,
				isquest: [{
					id: '1',
					name: '我的提问',
					text: '高质量提问有助提高您的关注度',
					path: '/pages_a/myquestion/myquestion',
					is_answer: true
				}, {
					id: '2',
					name: '我的回答',
					text: '被采纳的回答将会获得持续收益',
					path: '/pages_b/myAnswer/myAnswer',
					is_answer: true
					// this.user.is_answer == "已通过"
				}, {
					id: '3',
					name: '等你回答',
					text: '社区用户向您提问',
					path: '/pages_b/waitAnswer/waitAnswer',
					is_answer: true
					// this.user.is_answer == "已通过"
				}, {
					id: '4',
					name: '关注的提问',
					text: '已关注的提问',
					path: '/pages_a/followPage/followPage',
					is_answer: true
				}, {
					id: '5',
					name: '收藏的回答',
					text: '已收藏的回答和付费的回答',
					path: '/pages_b/collect_answer/collect_answer',
					is_answer: true
				}],
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				selected: 3,
				imgList: [],
				income: 0
			};
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			if (!this.tokenbleam) {
				this.show = true
			}
			console.log("xxxx");
			// this.getData()



		},
		onShow() {
			this.numbe = 0
			this.questionIncom = 0
			this.getData()
			this.getArticleAnswerCount()
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
				homelog: state => state.remote?.homelog?.data_list ?? [],
			}),

		},
		mounted() {
			// this.querySectionsIcon()
			this.querySections().then(res => {
				this.isquest.map(item => {
					if (item.id == '1') {
						item.img = this.queryIconImage('userlogolist1')
					}
					if (item.id == '2') {
						item.img = this.queryIconImage('userlogolist2')
						item.is_answer = this.user.is_answer == "已通过"
					}
					if (item.id == '3') {
						item.img = this.queryIconImage('userlogolist3')
						item.is_answer = this.user.is_answer == "已通过"
					}
					if (item.id == '4') {
						item.img = this.queryIconImage('answerpostion3')
					}
					if (item.id == '5') {
						item.img = this.queryIconImage('userlogolist5')
					}
				})
			})





			// let iconList = uni.getStorageSync('iconImg')
			// let iconItemList = iconList.filter(rs => rs.model == "iconList")[0].data_list

			// if (iconList.length != 0) {
			// 	this.isquest.map(item => {

			// 		if (item.id == '1') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist1")?.img?.url;
			// 			console.log(item.img)
			// 		}
			// 		if (item.id == '2') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist2")?.img?.url;

			// 		}
			// 		if (item.id == '3') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist3")?.img?.url;
			// 		}
			// 		if (item.id == '4') {
			// 			item.img = iconItemList?.find(res => res?.label == "answerpostion3")?.img?.url;
			// 		}
			// 		if (item.id == '5') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist5")?.img?.url;
			// 		}
			// 	})

			// 	this.onquest.map(item => {
			// 		if (item.id == '1') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist1")?.img?.url;
			// 		}
			// 		if (item.id == '4') {
			// 			item.img = iconItemList?.find(res => res?.label == "answerpostion3")?.img?.url;
			// 		}
			// 		if (item.id == '5') {
			// 			item.img = iconItemList?.find(res => res?.label == "userlogolist5")?.img?.url;
			// 		}
			// 	})
			// }




		},
		methods: {
			...methods,
			...methodsJS,
			//获取提问回答数量
			getArticleAnswerCount() {
				let usercoundId = uni.getStorageSync('userInfo').id
				let todayStart = new Date(new Date().setHours(0, 0, 0, 0))
				let todayEnd = new Date(new Date().setHours(23, 59, 59, 999))
				let tempCount = 0
				if (usercoundId) {
					this.$store.dispatch("remote/query", {
						model: "article",
						where: {
							_and: [{
									user_user: {
										_eq: usercoundId
									}
								},
								{
									created_at: {
										_gt: todayStart
									}
								},
								{
									created_at: {
										_lt: todayEnd
									}
								}
							]
						},
						limit: -1,
						field_string: `id user_user todayAnswerCount:article_comment_aggregate(where:{
										_and:[
										            {created_at:{_gt:${todayStart.getTime()}}},
										            {created_at:{_lt:${todayEnd.getTime()}}}
										          ]
									}){count:aggregate{count}}`
					}).then(res => {
						// this.todayAnswerCount
						if (res.count != 0) {
							res.data_list.map(item => {
								tempCount += item.todayAnswerCount.count.count
							})
							this.todayAnswerCount = tempCount
						}
					})
				}
			},
			queryImage(label, key = "homelog") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryImageHeader(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},

			// 进入用户资料编辑页面
			gouseredit() {
				uni.navigateTo({
					url: `/pages_a/useredit/useredit`
				})
			},
			govalue(item) {
				if (this.user.id) {
					uni.navigateTo({
						url: item.path
					})
				} else {
					this.showLoginPopular = !this.showLoginPopular
				}
			},

			loginsubmit() {
				uni.navigateTo({
					url: `/pages/login/login?url=${'/pages/me/me'}`
				})
				this.showLoginPopular = false
			},
			cancellationbtn() {
				this.showLoginPopular = !this.showLoginPopular
			},


			gomyincome() {
				uni.navigateTo({
					url: "/pages_a/myincome/myincome"
				})
			},
			goapply() {
				uni.navigateTo({
					url: "/pages_a/applyquestion/applyquestion?type=" + this.user.is_answer
					// url: "/pages_a/applyquestion/applyquestion?type=" + '审核中'
				})
			},
			getData() {
				this.$store.dispatch("remote/query", {
					model: "image",
					order_by: {
						id: 'asc'
					},
					where: {
						name: {
							_eq: '我的页面'
						}
					},
					field_string: 'id name img{url}'
				}).then(res => {
					this.imgList = JSON.parse(JSON.stringify(res.data_list))
				})

				if (uni.getStorageSync('userInfo').id) {
					this.$store.dispatch("remote/query", {
						model: 'user',
						isRefresh: true,
						where: {
							id: {
								_eq: uni.getStorageSync('userInfo').id
							}
						},
						field_string: 'id sex mobile email nickname is_answer avatar{url} avatar_id user_assets{id balance } user_interest{id user_user user_fans_user} background_img{url} profile tag_list attach_data article_comments(where:{type:{_eq:"1"}}){id article_comment_parent_article_comment created_at}'
					}).then(res => {
						let currentTimeStamp = Date.now();
						// 创建一个新的日期对象
						let currentDate = new Date(currentTimeStamp);
						// 设置时间为当天的凌晨（00:00）
						currentDate.setHours(0, 0, 0, 0);
						// 获取当天凌晨的时间戳
						let startOfDayTimeStamp = currentDate.getTime();
						if (res.data.article_comments?.length > 0) {
							res.data.article_comments.map((v, i) => {
								let dateObject = new Date(v.created_at);
								let timestamp = dateObject.getTime();
								if (timestamp > startOfDayTimeStamp) {
									return this.numbe++
								}
							})
						}
						// console.log(startOfDayTimeStamp);
						// console.log("获取用户信息", res)
						this.user = JSON.parse(JSON.stringify(res.data))
					})
				}

				if (this.user.is_answer == '已通过') {
					this.$store.dispatch("remote/query", {
						model: 'user_assets',
						isloading: false,
						where: {
							user_user: {
								_eq: uni.getStorageSync('userInfo').id
							}
						},
						field_string: 'id type status user_assets_detail_aggregate(where:{blean: {_eq: true} type:{_ilike:"获得"}}){aggregate{sum{change_val}}}',
						limit: -1,
					}).then(res => {
						this.income = res.data.user_assets_detail_aggregate.aggregate.sum.change_val
					})
				} else {
					this.$store.dispatch("remote/query", {
						model: 'user_assets',
						isloading: false,
						where: {
							user_user: {
								_eq: uni.getStorageSync('userInfo').id
								// _eq: '63'
							},
						},
						limit: -1,
						field_string: 'id type status user_assets_detail{change_val created_at title}'
					}).then(res => {
						let now_time = new Date().getTime()
						res.data.user_assets_detail.map(v => {

							if (v.title == '文章评论获得') {
								// console.log(v);
								this.questionIncom += v.change_val
							}
						})
					})
				}
			}
		},

		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			// console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;


		.contetn-header {
			width: 100%;
			height: 365rpx;

			.page-header-backimg {
				width: 100%;
				height: 365rpx;
				// mix-blend-mode: screen;
			}

			// z-index: 999;
			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				// padding-left: 30rpx;
				position: fixed;
				z-index: 999989;

				//top: 80rpx;
				// height: var(--status-bar-height);
				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: Source Han Sans CN;
					font-size: 36rpx;
					font-weight: normal;
					line-height: 36rpx;
					text-align: center;
					letter-spacing: 0px;

					color: #000000;
				}

			}
		}

		.content-body {
			width: 100%;
			box-sizing: border-box;
			padding: 0 27rpx;
			background-color: #f4f4f4;
			margin-top: -100rpx;
			box-sizing: border-box;
			padding-bottom: 200rpx;

			.content-body-top {
				width: 100%;
				// height: 200rpx;
				height: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 10rpx;
				padding-bottom: 17rpx;
				border-radius: 15rpx;

				.body-top-fiest {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx 10rpx;
					position: relative;
					// border-bottom: 2rpx solid #ccc;
					padding-bottom: 0;

					.top-fiest-user {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: -15%;
						mix-blend-mode: normal;
						z-index: 10;
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 40rpx;
						text-align: center;
						letter-spacing: 0px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #000000;
					}

					.top-fiest-quest {
						width: 100%;
						height: 8vh;
						border-radius: 10rpx;
						margin-top: 72rpx;
						background-repeat: no-repeat;
						background-size: 100%;
						margin-bottom: 30rpx;

						.fiest-quest-login {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: Alibaba PuHuiTi 2.0;
							font-size: 36rpx;
							font-weight: 600;
							line-height: 40rpx;
							letter-spacing: 0rpx;
							color: #FFFFFF;
						}

						.fiest-quest-false {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							padding: 12rpx 26rpx;
							font-family: YouSheBiaoTiHei;
							font-size: 36rpx;
							font-weight: 600;
							line-height: 40rpx;
							letter-spacing: 0em;
							color: #FFFFFF;

							.quest-false-content-noAnswer {

								display: flex;
								justify-content: center;
								align-items: center;
								font-family: Alibaba PuHuiTi 2.0;
								font-size: 36rpx;
								font-weight: 600;
								line-height: 30rpx;
								// margin-top: 25rpx;
								text-align: right;
								letter-spacing: 0px;
								// text-decoration: underline;
								color: #FFFFFF;
							}

							.quest-false-title {
								width: 100%;
								text-align: left;
							}

							.quest-false-title-noAnswer {
								width: 100%;
								height: 90%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								text-align: left;

								.quest-false-content {
									display: flex;
									justify-content: center;

									font-family: Alibaba PuHuiTi 2.0;
									font-size: 36rpx;
									font-weight: 600;
									line-height: 30rpx;
									margin-top: 25rpx;
									text-align: right;
									letter-spacing: 0px;
									// text-decoration: underline;
									color: #FFFFFF;
								}


							}

							.quest-false-content {
								display: flex;
								justify-content: center;
								font-family: Alibaba PuHuiTi 2.0;
								font-size: 36rpx;
								font-weight: 600;
								line-height: 30rpx;
								margin-top: 25rpx;
								text-align: right;
								letter-spacing: 0px;
								// text-decoration: underline;
								color: #FFFFFF;
							}
						}

						.fiest-quest-true {
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							padding: 12rpx 26rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							// margin-top: 40rpx;

							.quest-true-one {
								flex: 1;
								font-family: HarmonyOS Sans SC;
								height: 100%;
								font-size: 18rpx;
								font-weight: 500;
								line-height: 30rpx;
								text-align: center;
								letter-spacing: 0px;
								color: #FFFFFF;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: space-between;
							}

							.quest-true-one:nth-child(2) {
								border-left: 4rpx solid rgba(255, 255, 255, .5);
								border-right: 4rpx solid rgba(255, 255, 255, .5);


							}
						}


					}



					.fiest-quest-money {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.quest-money-left {
							font-family: Alibaba PuHuiTi 2.0;
							font-size: 18rpx;
							font-weight: normal;
							line-height: 40rpx;
							letter-spacing: 0px;
							color: #666666;
							display: flex;
							flex-direction: column;

							.money-left-text {
								font-family: HarmonyOS Sans SC;
								font-size: 24rpx;
								font-weight: 500;
								line-height: 40rpx;
								letter-spacing: 0px;
								color: #231815;
							}
						}

						.quest-money-right {
							width: 180rpx;
							height: 60rpx;
							border-radius: 15rpx;
							opacity: 1;
							text-align: center;
							font-family: HarmonyOS Sans SC;
							font-size: 24rpx;
							font-weight: 500;
							line-height: 60rpx;
							text-align: center;
							letter-spacing: 0px;
							color: #F09500;
							box-sizing: border-box;
							border: 2rpx solid #F09500;
						}
					}

					.second-quest-money {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 30rpx;

						.second-quest-money-info {
							width: 80%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.second-quest-money-infoLeft {
								position: relative;
							}

							.second-quest-money-infoLeft::after {
								content: '';
								display: block;
								width: 3px;
								height: 20px;
								position: absolute;
								opacity: 1;
								top: 3px;
								right: -50%;
								background: #D8D8D8;
							}

						}
					}
				}

				.noAnswer-info {
					height: 15vh;
					width: 100%;
					// margin-bottom: 15px;
					// background-color: #000000;
					background-color: #FFFFFF;
					// box-shadow: 0px -4px 0px;
					border-radius: 15px;
				}

				.body-top-list {
					width: 100%;
					margin-top: 15rpx;
					height: 110rpx;
					border-radius: 15rpx;
					opacity: 1;
					background: #FFEDDA;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					align-items: center;

					.top-list-title {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 18rpx;
						font-weight: 500;
						line-height: 30rpx;
						letter-spacing: 0px;

						/* bf */
						color: #BFBFBF;

						.list-title-text {
							font-family: Alibaba PuHuiTi 2.0;
							font-size: 30rpx;
							font-weight: 500;
							line-height: 40rpx;
							letter-spacing: 0px;
							/* 666 */
							color: #666666;
						}
					}
				}
			}

			.content-body-bottom {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx;
				border-radius: 15rpx;
				margin-top: 30rpx;
				background-color: #fff;

				.body-bottom-list {
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 20rpx;
					background-color: #fff;

					.bottom-list-title {
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 30rpx;
						font-weight: 500;
						line-height: 40rpx;
						letter-spacing: 0px;
						flex: 1;
						/* 666 */
						color: #666666;
					}
				}
			}

			.content-body-logo {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 35rpx;
			}
		}


		.popularlogin {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popularlogin-text {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin: 12rpx 0 128rpx 0
			}

			.popularlogin-btn {
				display: flex;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 0 65rpx;

				.popularlogin-btn-left {
					width: 215rpx;
					height: 70rpx;
					background: #26C789;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
				}
			}
		}
	}
</style>